<!-- eslint-disable vue/valid-v-for -->
<template>
	<div class="layout">
		<div class="left">
			<div class="header">
				<div class="tab-list">
					<el-tabs v-model="activeName">
						<el-tab-pane label="选择部门" name="Deps"></el-tab-pane>
						<el-tab-pane label="选择角色" name="Roles"></el-tab-pane>
						<el-tab-pane label="选择人员" name="Users"></el-tab-pane>
					</el-tabs>
				</div>
				<div class="custom-search">
					<el-input class="search-input" :placeholder="placeholder" v-model="keywords"></el-input>
				</div>
			</div>
			<div class="content-box">
				<!-- <template v-for="com in allComponent">
					<component
						v-if="activeName == com"
						:is="com"
						:key="com"
						:keyWords="keywords"
						@select="select"
						v-model="moduleData[com].selectData"
						v-show="com==activeName"
						:name="com"
					></component>
				</template> -->

				<transition name="slide-fade" mode="out-in">
					<component
						:is="activeName"
						:keyWords="keywords"
						@select="select"
						v-model="moduleData[activeName].selectData"
						:name="activeName"
					></component>
				</transition>
			</div>
		</div>
		<div class="right">
			<div class="tagAction">
				<span class="count">已选 {{ selectCount>0?"("+selectCount+")":"" }}:{{ selectSort }}</span>
				<span class="clear" @click="clear">清空</span>
			</div>
			<div class="content-box">
				<transitionGroup name="slide-fade" mode="out-in">
					<template v-for="key in selectSort">
						<template v-for="(item) in store[dict[key]].data">
							<div
								class="list_item"
								v-if="hasIsSelect(item.F_UserId || item.F_RoleId || item.F_DepartmentId,key)"
								:key="item.F_UserId || item.F_RoleId || item.F_DepartmentId"
								:id="item.F_UserId || item.F_RoleId || item.F_DepartmentId"
							>
								<div class="label">
									<span class="head_img">
										<img :class="{ icon:!item.F_HeadIcon }" :src="item.F_HeadIcon" />
									</span>
									<span>{{ item.F_RealName || item.F_FullName  }}</span>
								</div>
								<!-- <i class="el-icon-close close" @click="handelDelete(index, key)"></i> -->
								<i class="el-icon-close close" @click="deleteItem(item,key)"></i>
							</div>
						</template>
					</template>
				</transitionGroup>
				<!-- <span v-for="index in store"></span> -->
			</div>
		</div>
	</div>
</template>
<script>
import Deps from "./deps";
import Users from "./users";
import Roles from "./roles";
import { store } from "../storeData.js"
import { mixinsDefer } from "../utils";
export default {
	name: "SelectTab",
	mixins:[mixinsDefer],
    components: {
        Deps,
        Users,
        Roles
	},
	props: {
		echoData: {
			type: Array,
			default:()=>[]
		}
	},
    data() {
        return {
            allComponent:["Deps","Users","Roles"],
			activeName: "Deps",
			keywords:"",
            store,
            dict: {
                "Deps": "depData",
                "Users": "userData",
                "Roles": "roleData"
            },
            moduleData: {
				Deps: {
					key:"F_DepartmentId",
                    selectData: [],
                },
				Users: {
					key:"F_UserId",
                    selectData: [],
                },
				Roles: {
					key:"F_RoleId",
                    selectData: [],
                }
            },
			selectSort: [],
			deferFn:this.renderDefer()

        }
	},
	computed: {
		selectCount() {
			return this.moduleData.Deps.selectData.length + this.moduleData.Users.selectData.length + this.moduleData.Roles.selectData.length;
		},
		placeholder() {
			const type = this.activeName;
			let text = ""
			switch (type) {
				case "Deps":
					text= "请输入部门名称"
					break;
				case "Users":
					text= "请输入用户名称"
					break;
				case "Roles":
					text= "请输入角色名称"
					break;
				default:
					break;
			}
			return text
		}
	},
	watch: {
		"activeName": function (val, oldVal) {
			if (val!==oldVal) {
				this.keywords = "";
			}

		},
		"echoData": {
			handler: function (val) {
				this.echo(val);
			},
			immediate:true
		}
	},
	methods: {
		handelKeyWords(v){
			this.keywords = v;
		},
		deleteItem(item, key) {
			const id = item[this.moduleData[key].key];
			const index = this.moduleData[key].selectData.indexOf(id);
			console.log(index, item, this.moduleData[key].key);
			this.moduleData[key].selectData.splice(index,1)
			this.getSortSelectData();
		},
		clear() {
			this.moduleData.Deps.selectData = [];
			this.moduleData.Users.selectData = [];
			this.moduleData.Roles.selectData = [];
			// if (item.data.length == 0) {
			// 		this.selectSort.indexOf(item.type)>-1 && this.selectSort.splice(this.selectSort.indexOf(item.type),1);
			// 	}
			this.selectSort = [];
			this.getSortSelectData();
		},
		echo(arrData) {
			const sort = [];
			arrData.forEach((item) => {
				this.moduleData[item.type].selectData = JSON.parse(JSON.stringify(item.data));
				sort.push(item.type);
			});
			this.selectSort = sort;
		},
        getSortSelectData() {
            const selectData = [];
            this.selectSort.forEach((key, index) => {
                const data = {type:key,data:this.moduleData[key].selectData,sort:index}
                selectData.push(data);
			});

            this.$emit("selectData", selectData);
        },
        hasIsSelect(id,key) {
            return this.moduleData[key].selectData.includes(id);
        },
		select(type, val) {
            if (val.length && !this.selectSort.includes(type)) {
               this.selectSort.push(type)
            } else {
                if (!val.length){
                  const idx = this.selectSort.indexOf(type);
                   idx > -1 && this.selectSort.splice(idx, 1);
                }
			}
            this.getSortSelectData();

        }
	},
	beforeDestroy() {
		this.deferFn.clearDefer();
	}
}
</script>
<style lang="scss">
// .slide-fade-enter-active,.slide-fade-leave-active {
//   transition: all .3s ease;
// }
// // .slide-fade-leave-active {
// //   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
// // }
// .slide-fade-enter, .slide-fade-leave-to
// /* .slide-fade-leave-active for below version 2.1.8 */ {
//   transform: translateX(100%);
// //   opacity: 0;
// }

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.2s linear;
}
.slide-fade-enter, .slide-fade-leave-active {
    opacity: 0;
}
.slide-fade-enter {
  transform: translateX(30px);
}
.slide-fade-leave-active {
  transform: translateX(-30px);
}
</style>
<style lang="scss" scoped>
::v-deep(.el-tabs__nav-wrap){
	margin: auto;
	display:flex;
}
::v-deep(.el-tabs__nav-scroll){
		display: flex;
		margin: auto;
}
.layout{
    display: flex;
    border: solid 1px #eee;
    box-sizing: border-box;
    .left{
        width: 300px;
        height: 40vh;
        display: flex;
        flex-direction: column;
        border-right:solid 1px #eee;
        flex-shrink:0;
        padding:10px;
		box-sizing: border-box;
		.custom-search{
			width: 100%;
			height: 32px;
			.search-input{
				width: 100%;
				height: 32px;
				::v-deep(.el-input__inner){
					height:32px;
					width: 100%;
				}
			}
		}
        .content-box{
            flex:1;
            height:0px;
			overflow: hidden;
        }

    }
    .right{
        flex:1;
        padding:10px;
		height: 40vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.tagAction{
			height:40px;
			display: flex;
			justify-content: space-between;
			width: 100%;
			flex-shrink: 0;
			align-items: center;
			font-size: 12px;
			.clear{
				cursor: pointer;
				user-select: none;
			}
		}
        .content-box{
            height:100%;
            overflow-y:auto;
            overflow-x:hidden;
			flex:1;
            .list_item {
				display: inline-flex;
				overflow: hidden;
				padding: 0px 10px;
				justify-content: space-between;
				align-items: center;
				background-color: #f8f8f8;
				margin: 5px;
				border-radius: 2px;
				cursor: pointer;
				.label {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 14px;
					.head_img {
						width: 32px;
						height: 32px;
						border-radius: 4px;
						overflow: hidden;
						flex-shrink: 0;
						margin-right: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #dae5ff;
						font-size: 0px;
						position: relative;
						img {
							width: 100%;
							height: 100%;
							position: absolute;
							&.icon {
								width: 12px;
								height: 12px;
							}
						}
					}
				}
				&:hover {
					background-color: #eee;
				}
				i.close {
					width: 16px;
					margin-left: 12px;
					height: 40px;
					line-height: 42px;
					text-align: center;
					cursor: pointer;
					color: #545454;
					font-size: 12px;
					flex-shrink: 0;
					margin: 0px;
					&:hover {
						color: red;
					}
				}
			}

        }
    }
}
</style>
